<template>
    <div class="add_goods">
      <!-- 面包屑导航 -->
      <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
          <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark" style="color:#000;background:#DCDFE6;padding:10px;">添加商品信息</div></el-col>
      </el-row>
      <!-- 步骤条 -->
      <el-steps :active="active" finish-status="success" class="mt-15 mb-15 pl-15 pr-15">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step title="步骤 3"></el-step>
        <el-step title="步骤 4"></el-step>
        <el-step title="步骤 5"></el-step>
      </el-steps>
      <!-- 做出teb栏 -->
      <el-tabs tab-position="left"  @tab-click="tabadd">
        <el-tab-pane label="基本信息">用户管理</el-tab-pane>
        <el-tab-pane label="商品参数">配置管理</el-tab-pane>
        <el-tab-pane label="商品属性">
          <div class="amap-wrapper">
            <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商品图片">
            <el-upload
              class="upload-demo"
              action="http://127.0.0.1:8888/api/private/v1/upload"
              :headers="handtoken"
              multiple
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-upload="handBeforeuploading"
              :on-success="handlupsuess"
              :file-list="fileList2"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
        </el-tab-pane>
        <el-tab-pane label="广告分析">
            <chart :options='option' auto-resize></chart>
        </el-tab-pane>
      </el-tabs>
    </div>
</template>

<script>
export default {
  data () {
    return {
      active: 1,
      fileList2: [{name: 'food.jspg', url: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3350443302,3095965521&fm=58'}],
      handtoken: {
        Authorization: localStorage.getItem('mytoken')
      },
      // 图表
      option: {
        title: {
          text: '堆叠区域图'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            areaStyle: {normal: {}},
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
    }
  },
  methods: {
    tabadd (val) {
      // console.log(val)
      this.active = parseInt(val.index) + 1
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handlupsuess (response, file, fileList) {
      // console.log(response, file, fileList)
      if (response.meta.status === 200) {
        this.$message.success(response.meta.msg)
      } else {
        this.$message.error(response.meta.msg)
      }
    },
    handBeforeuploading (file) {
      console.log(file)
      if (file.size > 5000) {
        this.$message.info('上次图片过大')
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.add_goods{
  .amap-wrapper {
    width: 800px;
    height: 500px;
  }
  .el-tab-pane{
    width: 800px;
    height: 500px;
    .echarts{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
